<template>
  <div class="p-5">
    <div class="border border-dashed border-red-500 text-red-500 p-2 mb-4 bg-red-100 font-bold text-12">请打开浏览器调试工具进行查看!</div>
    <div class="pb-4 flex mb-4 border-b border-dashed border-gray-300 gap-3 flex-wrap">
      <AButton @click="getModel" type="primary">获取model (getFormValues)</AButton>
      <AButton @click="setModel" type="primary">修改model (setFormValues)</AButton>
      <AButton @click="pageUpdateSchema" type="primary">更新表单条目 (updateSchema)</AButton>
      <AButton @click="pageResetSchema" type="primary">更新整个表单 (resetSchema)</AButton>
      <AButton @click="pageRemoveByName" type="primary">根据属性名删除表单 (removeFormByName)</AButton>
      <AButton @click="pageAddSchema" type="primary">动态添加条目 (appendFormItems)</AButton>
      <AButton @click="pageResetForm" type="primary">重置数据 (resetForms)</AButton>
      <AButton @click="pageValidate" type="primary">校验是否有效 (validate)</AButton>
      <AButton @click="pageClearValidate" type="primary">清除提示信息 (clearValidate)</AButton>
    </div>
    <ECForm @register="registerForm"></ECForm>
  </div>

</template>

<script lang="ts" setup>
import { useForm } from '@zm-pkg/ui'
import dayjs from 'dayjs'

const v = ref('11')

setTimeout(() => {
  v.value = '2334'
}, 2000);

const [registerForm, {

  getFormValues,
  setFormValues,
  updateSchema,
  resetSchema,
  resetForms,
  removeFormByName,
  appendFormItems,
  validate,
  clearValidate

}] = useForm({
  mode: 'dialog',
  model: {
    name1: v
  },
  schemas: [
    {
      component: 'Input',
      name: 'name1',
      label: '条件一'
    },
    {
      component: 'MonthPicker',
      name: 'name2',
      label: '条件二',
      props: {
        defaultValue: '2022-10-12'
      }
    },
    {
      component: 'WeekPicker',
      name: 'name3',
      label: '条件三',
      props: {
        defaultValue: dayjs('2022-10-12')
      }
    },
    {
      component: 'InputNumber',
      name: 'name4',
      label: '条件四',
      required: true
    },
    {
      component: 'RangePicker',
      name: 'name5',
      extraName: ['name6', 'name7'],
      label: '条件五',
      props: {
        // defaultValue: ['2022-10-12', '2022-10-15']
      }
    },
  ]
})


// 获取model
function getModel() {
  console.log(getFormValues())
}

// 修改model
function setModel() {
  setFormValues({
    name4: 120,
    name2: '2022-12'
  })
}

// 根据name更改一些数据属性
function pageUpdateSchema() {
  updateSchema({
    component: 'Input',
    name: 'name1',
    labelWidth: 120,
    label: '我是更改后的数据'
  })
}

// 更新表单
function pageResetSchema() {
  resetSchema([
    {
      component: 'Input',
      name: 'name1',
      label: '我是重置表单1'
    },
    {
      component: 'Input',
      name: 'name2',
      label: '我是重置表单2'
    }
  ])
}

function pageRemoveByName() {
  removeFormByName(['name1'])
}

function pageAddSchema() {
  appendFormItems([{
    component: 'Input',
    name: 'name8',
    label: '新添加的表单1'
  },{
    component: 'Input',
    name: 'name9',
    label: '新添加的表单2'
  }], null, true)
}


// 重置表单数据
function pageResetForm() {
  resetForms()
}

function pageValidate() {
  validate()
      .then(valid => {
        console.log(valid)
      })
      .catch( err => {} )
}

function pageClearValidate() {
  clearValidate(['name4'])
}

</script>
